@function pxToRem($val) {
    @return $val/100 + rem;
}

/deep/#subPage {
    width: 100%;
    height: 100%;
    min-width: pxToRem(1440);
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    .left,
    .right{
        width: pxToRem(440);
        min-width: pxToRem(440);
        height: 100%;
        overflow: hidden;
        .item{
            position: relative;
            width: 100%;
            height: pxToRem(288);
            background-image: url('../../assets/images/md-board/common/item-bc.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            padding: pxToRem(5) 0;
            box-sizing: border-box;
            margin-bottom: pxToRem(5);
            .top{
                width: 100%;
                padding: 0 pxToRem(48);
                box-sizing: border-box;
                font-size: pxToRem(20);
                font-family: Source Han Sans CN;
                font-weight: bold;
                color: #DFEEF3;
                background: linear-gradient(0deg, #7ED7FB 0%, #FFFFFF 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                margin-bottom: pxToRem(20);
            }
            .item-box{
                width: 100%;
                padding: 0 pxToRem(25);
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: pxToRem(20);
                .item-box-left{
                    width: pxToRem(56);
                    height: pxToRem(56);
                    min-width: pxToRem(56);
                    margin-right: pxToRem(5);
                    img{
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
                .item-box-right{
                    flex: 1;
                    .p{
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .money{
                            flex: 1;
                            text-align: left;
                            font-size:pxToRem(20);
                            font-family: Source Han Sans CN;
                            font-weight: bold;
                            color: #DFEEF3;

                            background: linear-gradient(0deg, #01DFF4 0%);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }
                        .moneyText{
                            flex: 1;
                            font-size: pxToRem(16);
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #BCF0FE;
                        }
                        .text{
                            font-size: pxToRem(16);
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #BCF0FE;
                        }
                        .time{
                            font-size: pxToRem(16);
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #DFEEF3;
                            background: linear-gradient(0deg, #01DFF4 0%);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }
                        .line{
                            width: pxToRem(2);
                            height: pxToRem(15);
                            background: #FFFFFF;
                            opacity: 0.8;
                            margin-right: pxToRem(12);
                        }
                    }
                }
            }
            .ul{
                width: 100%;
                padding: 0 pxToRem(25);
                box-sizing: border-box;
                .li{
                    list-style: none;
                    width: 100%;
                    height: pxToRem(35);
                    background-color: rgba(6, 157, 204, 0.15);
                    font-size: pxToRem(16);
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #BCF0FE;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding: 0 pxToRem(13);
                    box-sizing: border-box;
                    margin-bottom: pxToRem(3);
                    .name{
                        width: pxToRem(120);
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .sub{
                        flex: 1;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
            &.item-emp-item-bc{
                background-image: url('../../assets/images/md-board/common/emp-item-bc3.png');
            }
            &.item1{
                height: pxToRem(287);
                .echarts{
                    width: auto;
                    height: auto;
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    #safety{
                        width: pxToRem(400);
                        height: pxToRem(200);
                    }
                }
            }
            &.item2{
                height: pxToRem(340);
                background-image: url('../../assets/images/md-board/common/item-bc4.png');
                .list-box{
                    width: 100%;
                    height: calc(100% - 0.4rem);
                    padding: 0 pxToRem(25);
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-start;
                    .list-left{
                        height: 100%;
                        display: flex;
                        justify-content:space-around;
                        align-items: center;
                        flex-direction: column;
                        .list-left-item{
                            .icon{
                                width: pxToRem(45);
                                height: pxToRem(45);
                                img{
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                            .text{
                                font-size: pxToRem(16);
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                color: #BCF0FE;
                                opacity: 0.8;
                            }
                            .numBox{
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                .num{
                                    font-size: pxToRem(30);
                                    font-family: Source Han Sans CN;
                                    font-weight: bold;
                                    color: #31D3F3;
                                }
                                .sub{
                                    font-size: pxToRem(14);
                                    font-family: Source Han Sans CN;
                                    font-weight: 400;
                                    color: #31D3F3;
                                    opacity: 0.8;
                                }
                            }
                        }
                    }
                    .list-right{
                        width:pxToRem(310);
                        height: pxToRem(260);
                        border: pxToRem(1) solid rgba(64, 223, 231, 0.15);
                        padding: pxToRem(12) pxToRem(24);
                        box-sizing: border-box;
                        .name{
                            font-size: pxToRem(16);
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #BCF0FE;
                            text-align: center;
                        }
                        .line{
                            width: 100%;
                            height: pxToRem(1);
                            background: #31D3F3;
                            opacity: 0.15;
                            margin: pxToRem(2) auto;
                        }
                        .sub{
                            font-size: pxToRem(14);
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #01DFF4;
                            opacity: 0.8;
                            text-align: center;
                        }
                        .list{
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            .list-item{
                                width: pxToRem(110);
                                .img{
                                    width: 100%;
                                    height: pxToRem(135);
                                    .el-image{
                                        width: 100%;
                                        height: 100%;
                                        .el-image-viewer__canvas{
                                            img{
                                                display: block;
                                                width: auto !important;
                                                height: auto !important;
                                            }
                                        }
                                        img{
                                            display: block;
                                            width: 100%;
                                            height: 100%;
                                        }
                                    }
                                }
                                .p{
                                    width: 100%;
                                    display: flex;
                                    justify-content: flex-start;
                                    align-items: center;
                                    margin: pxToRem(5) 0;
                                    .round{
                                        width: pxToRem(8);
                                        height: pxToRem(8);
                                        background: #01DFF4;
                                        border-radius: 50%;
                                        margin-right: pxToRem(5);
                                    }
                                    .text{
                                        flex: 1;
                                        font-size: pxToRem(12);
                                        font-family: Source Han Sans CN;
                                        font-weight: 400;
                                        color: #BCF0FE;
                                        opacity: 0.8;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            &.item3{
                display: block;
                height: pxToRem(580);
                background-image: url('../../assets/images/md-board/common/item-bc2.png');
                .tabs{
                    width: 100%;
                    padding: 0 pxToRem(25);
                    box-sizing: border-box;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .tab{
                        width: pxToRem(97);
                        height: pxToRem(30);
                        background-image: url('../../assets/images/md-board/common/tab-bc.png');
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        font-size: pxToRem(16);
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #01DFF4;
                        text-align: center;
                        line-height: pxToRem(30);
                        margin-right: pxToRem(5);
                        cursor: pointer;
                        &:hover{
                            color: #FFFFFF;
                            text-shadow: pxToRem(0) pxToRem(2) pxToRem(10) #FFFFFF ;
                        }
                        &.active{
                            color: #FFFFFF;
                            text-shadow: pxToRem(0) pxToRem(2) pxToRem(10) #FFFFFF ;
                        }
                    }
                }
                .echarts{
                    width: auto;
                    height: auto;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .echartsBox{
                        position: relative;
                    }
                    #drawOnAttendEmp{
                        width: pxToRem(200);
                        height: pxToRem(200);
                    }
                    .warp {
                        width: calc(100% - 2.2rem);
                        max-height: pxToRem(150);
                        overflow: hidden;
                        ul {
                            width: 100%;
                            li {
                                width: 100%;
                                height: pxToRem(30);
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                font-size: pxToRem(14);
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                color: #01DFF4;
                                margin: auto;
                                em {
                                    width: pxToRem(10);
                                    height: pxToRem(10);
                                    margin-right: pxToRem(5);
                                }
                                span {
                                    margin-right: pxToRem(5);
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                            }
                        }
                    }
                }
                .title{
                    width: 95%;
                    height: pxToRem(20);
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    background-image: url('../../assets/images/md-board/common/line-bc2.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    margin:pxToRem(20) auto;

                    .title-left{
                        flex: 1;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        font-size: pxToRem(20);
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #DFEEF3;
                        background: linear-gradient(0deg, #7ED7FB 0%, #FFFFFF 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        margin-top: pxToRem(-20);
                        .icon{
                            width: pxToRem(23);
                            height: pxToRem(23);
                            margin-right: pxToRem(15);
                            img{
                                display: block;
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                    .title-right{
                        flex: 1;
                        .block-box{
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            .block{
                                position: relative;
                                width: pxToRem(15);
                                height: pxToRem(15);
                                line-height: pxToRem(20);
                                text-align: center;
                                color: white;
                                transform: skew(-40deg);
                                margin-right: pxToRem(10);
                                margin-top: pxToRem(5);
                                &:nth-of-type(1){
                                    -webkit-animation: block-animation 1s linear alternate infinite;
                                    animation: block-animation 1s linear alternate infinite;
                                }
                                &:nth-of-type(2){
                                    -webkit-animation: block-animation 2s linear alternate infinite;
                                    animation: block-animation 2s linear alternate infinite;
                                }
                                &:nth-of-type(3){
                                    -webkit-animation: block-animation 3s linear alternate infinite;
                                    animation: block-animation 3s linear alternate infinite;
                                }
                                &:before{
                                    content: '';
                                    position: absolute;
                                    top: 0; right: 0; bottom: 0; left: 0;
                                    background-color: #01DFF4;
                                    z-index: -1;
                                }
                            }
                        }
                    }
                }
                .table-box{
                    width: 95%;
                    margin: auto;
                    height: pxToRem(215);
                    overflow: hidden;
                    .t-header{
                        width: 100%;
                        height: pxToRem(35);
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        background: rgba(1, 223, 244, 0.2);
                        overflow: hidden;
                        .td{
                            flex: 1;
                            text-align: center;
                            line-height: pxToRem(35);
                            margin-bottom: pxToRem(1);
                            font-size: pxToRem(16);
                            font-family: Source Han Sans CN;
                            font-weight: bold;
                            color: #B5EEFF;
                        }
                    }
                    .t-body{
                        width: 100%;
                        height: calc(100% - 0.35rem);
                        overflow: hidden;

                        .tr{
                            width: 100%;
                            display: flex;
                            background-color: rgba(6, 157, 204, 0.15);
                            margin-bottom: pxToRem(1);
                            .td{
                                flex: 1;
                                text-align: center;
                                line-height: pxToRem(35);
                                font-size: pxToRem(14);
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                color: #B5EEFF;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                    }
                }
            }
            &.item4{
                width: 100%;
                height: pxToRem(220);
                padding: 0 pxToRem(15);
                box-sizing: border-box;
                background-image: url('../../assets/images/md-board/common/emp-item-bc2.png');
                .list{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-wrap: wrap;
                    margin-top: pxToRem(25);
                    .item{
                        width: pxToRem(200);
                        min-width: pxToRem(200);
                        height: pxToRem(62);
                        background: rgba(1, 223, 244, 0.2);
                        border: pxToRem(2) solid rgba(1, 223, 244, 0.15);
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        margin-bottom: pxToRem(15);
                        padding: 0 pxToRem(20);
                        .item-left{
                            width: pxToRem(36);
                            height: pxToRem(30);
                            margin-right: pxToRem(30);
                            img{
                                display: block;
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .item-right{
                            .num{
                                width: auto;
                                font-size: pxToRem(24);
                                font-family: Source Han Sans CN;
                                font-weight: bold;
                                color: #FEDC3E;
                                text-shadow: 0px 0px pxToRem(8) rgba(0, 0, 0, 0.26);
                                background: linear-gradient(0deg, #2CC6FF 0%, #FFFFFF 100%);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                            }
                            .sub{
                                font-size: pxToRem(14);
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                color: #BCF0FE;
                            }
                        }
                    }
                }
            }
            &.item5{
                height: pxToRem(355);
                background-image: url('../../assets/images/md-board/common/quality-item-bc.png');
                .echarts{
                    width: auto;
                    height: auto;
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    #problem-summary{
                        width: pxToRem(400);
                        height: pxToRem(280);
                    }
                }
                .rank-list{
                    width: 100%;
                    height: pxToRem(270);
                    padding: 0 pxToRem(20);
                    box-sizing: border-box;
                    overflow: hidden;
                    .rank-item{
                        position: relative;
                        width: 100%;
                        height: pxToRem(30);
                        //background: linear-gradient(90deg, rgba(43, 95, 143, 0.5) 0%);
                        margin-bottom: pxToRem(15);
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        font-size: pxToRem(14);
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #BCF0FE;
                        //transform: rotate(-45deg);
                        //font-style: normal;
                        &::after{
                            display: block;
                            content: '';
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            width: 100%;
                            height: 100%;
                            background-image: url('../../assets/images/md-board/common/rank-bc7.png');
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                        }
                        &:nth-of-type(1){
                            .icon{
                                background-image: url('../../assets/images/md-board/common/rank-bc1.png');
                            }
                        }
                        &:nth-of-type(2){
                            .icon{
                                background-image: url('../../assets/images/md-board/common/rank-bc2.png');
                            }
                        }
                        &:nth-of-type(3){
                            .icon{
                                background-image: url('../../assets/images/md-board/common/rank-bc3.png');
                            }
                        }
                        &:nth-of-type(4){
                            .icon{
                                background-image: url('../../assets/images/md-board/common/rank-bc4.png');
                            }
                        }
                        &:nth-of-type(5){
                            .icon{
                                background-image: url('../../assets/images/md-board/common/rank-bc5.png');
                            }
                        }
                        &:nth-of-type(n + 6){
                            .icon{
                                background-image: url('../../assets/images/md-board/common/rank-bc6.png');
                            }
                        }

                        .icon{
                            display: block;
                            width: pxToRem(68);
                            min-width: pxToRem(68);
                            height: pxToRem(30);
                            margin-right: pxToRem(20);
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                            text-align: center;
                            line-height: pxToRem(30);
                            z-index: 10;
                        }
                        .name{
                            flex: 1;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            z-index: 10;
                        }
                        .num{
                            width: pxToRem(50);
                            min-width: pxToRem(50);
                            z-index: 10;
                        }
                    }
                }
            }
            &.item6{
                height: pxToRem(565);
                background-image: url('../../assets/images/md-board/common/quality-item-bc2.png');
                .text-list{
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding: 0 pxToRem(20);
                    box-sizing: border-box;
                    margin-bottom: pxToRem(15);
                    .text-item{
                        flex: 1;
                        .num{
                            font-size: pxToRem(30);
                            font-family: Source Han Sans CN;
                            font-weight: bold;
                            color: #01DFF4;
                            margin-bottom: pxToRem(15);
                            text-align: center;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        .text{
                            font-size: pxToRem(14);
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #BCF0FE;
                            opacity: 0.8;
                            text-align: center;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
                .echarts{
                    width: auto;
                    height: auto;
                    #quality-check,
                    #safety-check{
                        width: 100%;
                        height: pxToRem(400);
                    }
                }
                .change-list{
                    width: 100%;
                    height: pxToRem(425);
                    overflow: hidden;
                    padding: pxToRem(0) pxToRem(15);
                    box-sizing: border-box;
                    .change-item{
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        padding-bottom: pxToRem(13);
                        border-bottom: pxToRem(1) solid rgba(22, 174, 224, 0.32);
                        box-sizing: border-box;
                        margin-bottom: pxToRem(11);
                        .change-item-left{
                            width: pxToRem(125);
                            height: pxToRem(80);
                            min-width: pxToRem(125);
                            margin-right: pxToRem(30);
                            .img{
                                display: block;
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .change-item-right{
                            flex: 1;
                            overflow: hidden;
                            .change-item-title{
                                width: 100%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                font-size: pxToRem(16);
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                color: #BCF0FE;
                                margin-bottom: pxToRem(40);
                            }
                            .change-item-time{
                                width: 100%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                font-size: pxToRem(14);
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                color: #01DFF4;
                            }
                        }
                    }
                }
            }
            &.item7{
                height: pxToRem(355);
                background-image: url('../../assets/images/md-board/common/quality-item-bc.png');
                .text-list{
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding: 0 pxToRem(20);
                    box-sizing: border-box;
                    margin-bottom: pxToRem(15);
                    .text-item{
                        flex: 1;
                        .num{
                            font-size: pxToRem(30);
                            font-family: Source Han Sans CN;
                            font-weight: bold;
                            color: #01DFF4;
                            margin-bottom: pxToRem(15);
                            text-align: center;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        .text{
                            font-size: pxToRem(14);
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #BCF0FE;
                            opacity: 0.8;
                            text-align: center;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
                .echartsBox{
                    position: relative;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                }
                #safety-part{
                    width: 100%;
                    height: pxToRem(300);
                }
                .warp {
                    flex: 1;
                    max-height: pxToRem(150);
                    overflow: hidden;
                    ul {
                        width: 100%;
                        li {
                            width: 100%;
                            height: pxToRem(30);
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            font-size: pxToRem(14);
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #01DFF4;
                            margin: auto;
                            em {
                                width: pxToRem(10);
                                height: pxToRem(10);
                                margin-right: pxToRem(5);
                            }
                            span {
                                margin-right: pxToRem(5);
                            }
                        }
                    }
                }
            }
            &.item15{
                height: pxToRem(235);
                background-image: url('../../assets/images/md-board/common/item-bc3.png');
            }
        }
    }
    .center{
        width: pxToRem(950);
        height: 100%;
        .top{
            position: relative;
            width: 100%;
            height: pxToRem(580);
            border: pxToRem(1) solid #4AE1FF;
            padding: pxToRem(6);
            box-sizing: border-box;
            margin-bottom: pxToRem(5);
            .img{
                position: relative;
                width: 100%;
                height: 100%;
                border: pxToRem(1) solid #4AE1FF;
                box-sizing: border-box;
                overflow: hidden;
                .content {
                    width: 100%;
                    height: 100%;
                    border: pxToRem(2) solid #0075DB;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    .item{
                        width: 100%;
                        height: 100%;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        position: relative;
                        .tag{
                            position: absolute;
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            align-items: center;
                            width:  pxToRem(90);
                            height: pxToRem(90);
                            img{
                                width: pxToRem(60);
                                height: pxToRem(60);
                                cursor: pointer;
                            }
                            span{
                                width: 100%;
                                padding: pxToRem(5);
                                text-align: center;
                                color: #fff;
                                font-size: pxToRem(12);
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;

                                background: #314860 ;
                                box-shadow: 0px pxToRem(3) pxToRem(20) rgba(0, 0, 0, 0.24);
                                opacity: 1;
                                border-radius: pxToRem(12);
                            }
                        }
                        .nav{
                            position: absolute;
                            width: pxToRem(300);
                            height: pxToRem(350);
                            max-height: pxToRem(350);
                            top: 50%;
                            right: 0;
                            transform: translateY(-50%);
                            transition: all 0.5s ease-in;
                            overflow: hidden;
                            .scroll{
                                width: 100%;
                                height: 100%;
                                overflow-y: auto;
                                &::-webkit-scrollbar {
                                    width: 6px;
                                }
                                /*滚动槽*/
                                &::-webkit-scrollbar-track {
                                    -webkit-box-shadow: inset 0 0 6px rgba(49, 211, 243, 0.8);
                                    border-radius: 1px;
                                }
                                /* 滚动条滑块 */
                                &::-webkit-scrollbar-thumb {
                                    border-radius: 1px;
                                    background: rgba(0, 0, 0, 0.1);
                                    -webkit-box-shadow: inset 0 0 6px  rgba(49, 211, 243, 0.8);
                                }
                                &::-webkit-scrollbar-thumb:window-inactive {
                                    background:  rgba(49, 211, 243, 0.8);
                                }
                            }
                            nav {
                                .primary-nav {
                                    cursor: pointer;
                                    padding-left: pxToRem(10);
                                    // display: block;
                                    height: pxToRem(50);
                                    font-size: pxToRem(16);
                                    position: relative;
                                    color: #fff;
                                    user-select: none;
                                    display: flex;
                                    justify-content: flex-start;
                                    align-items: center;
                                    width: 100%;
                                    font-size: pxToRem(16);
                                    font-family: Source Han Sans CN;
                                    font-weight: 400;
                                    color: #fff;
                                    background-color: rgba(2, 36, 85, 0.66);
                                    //margin-bottom: pxToRem(3);
                                    .triangle {
                                        width: pxToRem(16);
                                        height: pxToRem(16);
                                        transition: all 0.2s;
                                        transform: rotate(-90deg);
                                    }
                                    .active {
                                        transform: rotate(0deg);
                                    }
                                    .active1 {
                                        transform: rotate(0deg);
                                    }
                                    .icon {
                                        width: pxToRem(26);
                                        height: pxToRem(26);
                                        // overflow: hidden;
                                        margin-right: 10px;
                                        // position: absolute;
                                        // left: 20px;
                                        // top: 18px;
                                    }
                                }
                                .nav-ul {
                                    transition: all 0.2s;
                                    color: #fff;
                                    width: 100%;
                                    overflow: hidden;
                                    li {
                                        list-style: none;
                                        position: relative;
                                        overflow: hidden;
                                        .active{
                                            width: pxToRem(16);
                                            height: pxToRem(16);
                                            min-width: pxToRem(16);
                                            display: block;
                                        }
                                        .triangle {
                                            position: absolute;
                                            width: pxToRem(16);
                                            height: pxToRem(9);
                                            right: pxToRem(15);
                                            top: pxToRem(20.5);
                                            transition: all 0.2s;
                                            transform: rotate(-180deg);
                                        }
                                        .sub-nav {
                                            position: relative;
                                            width: 100%;
                                            height: pxToRem(35);
                                            line-height: pxToRem(35);
                                            background-color: rgba(2, 36, 85, 0.66);
                                            //margin-bottom: pxToRem(3);
                                            font-size: pxToRem(16);
                                            font-family: Source Han Sans CN;
                                            font-weight: 400;
                                            color: #fff;
                                            cursor: pointer;
                                            display: flex;
                                            justify-content: space-between;
                                            align-items: center;
                                            padding: 0 pxToRem(38);
                                            box-sizing: border-box;
                                            .name{
                                                flex: 1;
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                                white-space: nowrap;
                                            }
                                        }
                                    }
                                }

                            }


                        }
                    }
                    .btn{
                        width: pxToRem(39);
                        height: pxToRem(100);
                        position: absolute;
                        right: pxToRem(0);
                        top: 50%;
                        transform: translateY(-50%);
                        background-image: url('../../assets/images/md-board/common/md-bc.png');
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        display: flex;
                        justify-content: center;
                        align-content: center;
                        flex-direction: column;
                        text-align: center;
                        cursor: pointer;
                        color: #fff;
                        transition: all 0.5s ease-in;

                        .icon {
                            position: absolute;
                            left: 5px;
                            top: 50%;
                            transform: translateY(-50%);
                            display: block;
                            width: pxToRem(14);
                            height: pxToRem(14);
                        }

                        span {
                            width: pxToRem(15);
                            font-size: pxToRem(14);
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #FFFFFF;
                            margin-left: pxToRem(30);
                        }
                    }
                    .btn1{
                        right: pxToRem(12);
                    }
                }
                .cool-list{
                    position: absolute;
                    height: 100%;
                    top: 0;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-direction: column;
                    .cool-item{
                       position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        width: pxToRem(135);
                        height: pxToRem(135);
                        &::after{
                            position: absolute;
                            left: 0;
                            top: 0;
                            display: block;
                            content: '';
                            width: 100%;
                            height: 100%;
                            -webkit-animation: rotate-animation 10s linear infinite;
                            animation: rotate-animation 10s linear infinite;
                            background-image: url('../../assets/images/md-board/common/cool-item-bc.png');
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                        }
                        .num{
                            font-size: pxToRem(30);
                            font-family: PangMenZhengDao;
                            font-weight: 400;
                            color: #FEFFFF;
                        }
                        .text{
                            width: 70%;
                            font-size: pxToRem(14);
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #00FFFF;
                            text-align: center;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
                .cool-list-left{
                    left: pxToRem(70);
                    animation: round-left-animation 3s  ease;
                    -webkit-animation: round-left-animation 3s  ease ;
                    &.cool-list{
                        .cool-item{
                            &:first-of-type{
                                transform: translateX(pxToRem(50));
                            }
                            &:last-of-type{
                                transform: translateX(pxToRem(50));
                            }
                        }
                    }

                }
                .cool-list-right{
                    right: pxToRem(70);
                    animation: round-right-animation 3s  ease;
                    -webkit-animation: round-right-animation 3s  ease ;
                    &.cool-list{
                        .cool-item{
                            &:first-of-type{
                                transform: translateX(pxToRem(-50));
                            }
                            &:last-of-type{
                                transform: translateX(pxToRem(-50));
                            }
                        }
                    }
                }
                .cool-bc{
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-top: pxToRem(-400);
                    margin-left: pxToRem(-400);
                    //margin-top: pxToRem(-295);
                    //margin-bottom: pxToRem(-295);
                    width: pxToRem(800);
                    height: pxToRem(800);
                    background-image: url('../../assets/images/md-board/common/cool-bc.png');
                    background-size: cover;
                    background-repeat: no-repeat;
                    -webkit-animation: rotate-animation 10s linear infinite;
                    animation: rotate-animation 10s linear infinite;
                    z-index: 9;
                    overflow: hidden;
                }
                .cool-bc3{
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-top: pxToRem(-90);
                    margin-left: pxToRem(-90);
                    width: pxToRem(180);
                    height: pxToRem(180);
                    background-image: url('../../assets/images/md-board/common/cool-bc3.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    //-webkit-animation: rotate 8s linear infinite;
                    //animation: rotate 8s linear infinite;
                    -webkit-animation: scale-animation 12s linear infinite;
                    animation: scale-animation 12s linear infinite;
                    z-index: 20;
                    opacity: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    border-radius: 50%;

                    .name{
                        position: absolute;
                        top: 0;
                        left: 50%;
                        width: pxToRem(180);
                        transform: translate(-50%,-170%);
                        font-size: pxToRem(30);
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #FEFFFF;
                    }
                    .num{
                        font-size: pxToRem(60);
                        font-family: Gothic !important;
                        font-weight: 400;
                        color: #FEFFFF;
                    }
                    .sub{
                        font-size: pxToRem(20);
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #FEFFFF;
                    }
                }
                .cool-bc4{
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-top: pxToRem(-90);
                    margin-left: pxToRem(-90);
                    width: pxToRem(180);
                    height: pxToRem(180);
                    background-color: rgba(1, 250, 252, 0.5);
                    border-radius: 50%;
                    z-index: 8;
                    -webkit-animation: rect-animation 5s linear infinite;
                    animation: rect-animation 5s linear infinite;
                    border-radius: 50%;

                }
                .cool-bc2{
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-top: pxToRem(-250);
                    margin-left: pxToRem(-250);
                    width: pxToRem(500);
                    height: pxToRem(500);
                    background-image: url('../../assets/images/md-board/common/cool-bc2.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    -webkit-animation: scale-animation 12s linear infinite;
                    animation: scale-animation 12s linear infinite;
                    z-index: 7;
                    opacity: 0.7;
                }
                .quality-box{
                    width: pxToRem(200);
                    height: pxToRem(200);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    background-color: RGBA(24, 75, 143, 0.5);
                    border-radius: 50%;
                    z-index: 10;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    .rollNum-main{
                        margin-bottom: pxToRem(20);
                        span{
                            border: pxToRem(2) solid #03C3FD;
                            box-shadow: rgba(255,255,255,0.5) 0 0 pxToRem(5)  inset;
                            border-radius: pxToRem(5);
                            //background: linear-gradient(0deg, #00FDF7, rgba(6, 41, 106, 0));
                        }
                    }
                    .text{
                        font-size: pxToRem(20);
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #FFFFFF;
                    }
                }
                .quality-list{
                    width: 95%;
                    position: absolute;
                    bottom: pxToRem(50);
                    left: 50%;
                    transform: translateX(-50%);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .quality-item{
                        width: pxToRem(260);
                        height: pxToRem(85);
                        padding: 0 pxToRem(30);
                        box-sizing: border-box;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        background-image: url('../../assets/images/md-board/common/quality-item-bc3.png');
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        .text{
                            font-size: pxToRem(18);
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #FFFFFF;
                        }
                        .num{
                            font-size: pxToRem(24);
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #01DFF4;
                        }
                    }
                }
                .check-unfinished-bc{
                    width: pxToRem(400);
                    height: pxToRem(400);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                }
                .page-list{
                    width: 90%;
                    position: absolute;
                    bottom: pxToRem(50);
                    left: 50%;
                    transform: translateX(-50%);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    z-index: 1000;
                    .page-item{
                        width: pxToRem(15);
                        height: pxToRem(15);
                        img{
                            display: block;
                            width: 100%;
                            height: 100%;
                            cursor: pointer;
                        }
                    }
                }
                .videoDeviceFlag{
                    width: pxToRem(300);
                    max-height: pxToRem(350);
                    position: absolute;
                    right: pxToRem(20);
                    top: 50%;
                    transform: translateY(-50%);
                    z-index: 10;
                    transition: all 0.5s ease-in;
                    .imgBtn {
                        width: pxToRem(39);
                        height: pxToRem(100);
                        position: absolute;
                        left: pxToRem(-39);
                        top: 50%;
                        transform: translateY(-50%);
                        background-image: url('../../assets/images/md-board/common/md-bc.png');
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        display: flex;
                        justify-content: center;
                        align-content: center;
                        flex-direction: column;
                        text-align: center;
                        cursor: pointer;
                        color: #fff;
                        .icon {
                            position: absolute;
                            left: 5px;
                            top: 50%;
                            transform: translateY(-50%);
                            display: block;
                            width: pxToRem(14);
                            height: pxToRem(14);
                        }

                        span {
                            width: pxToRem(15);
                            font-size: pxToRem(14);
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #FFFFFF;
                            margin-left: pxToRem(30);
                        }
                    }
                    .device-box{
                        width: pxToRem(300);
                        max-height: pxToRem(350);
                        overflow-y: auto;
                        &::-webkit-scrollbar {
                            width: 6px;
                        }
                        /*滚动槽*/
                        &::-webkit-scrollbar-track {
                            -webkit-box-shadow: inset 0 0 6px rgba(49, 211, 243, 0.8);
                            border-radius: 1px;
                        }
                        /* 滚动条滑块 */
                        &::-webkit-scrollbar-thumb {
                            border-radius: 1px;
                            background: rgba(0, 0, 0, 0.1);
                            -webkit-box-shadow: inset 0 0 6px  rgba(49, 211, 243, 0.8);
                        }
                        &::-webkit-scrollbar-thumb:window-inactive {
                            background:  rgba(49, 211, 243, 0.8);
                        }
                        .device-list{
                            width: 100%;
                            .device-item{
                                position: relative;
                                width: 100%;
                                height: pxToRem(35);
                                line-height: pxToRem(35);
                                background-color: rgba(2, 36, 85, 0.66);
                                //margin-bottom: pxToRem(3);
                                font-size: pxToRem(16);
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                color: #fff;
                                cursor: pointer;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                padding: 0 pxToRem(38);
                                box-sizing: border-box;
                                .name{
                                    flex: 1;
                                    height: pxToRem(35);
                                    line-height: pxToRem(35);
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                                .active{
                                    width: pxToRem(16);
                                    height: pxToRem(16);
                                    min-width: pxToRem(16);
                                    display: block;
                                }
                                .deviceStatus{
                                    position: absolute;
                                    left: pxToRem(25);
                                    top: 50%;
                                    transform: translateY(-50%);
                                    width: pxToRem(8);
                                    height: pxToRem(8);
                                    border-radius: 50%;
                                    z-index: 10;
                                    &.green{
                                        background: rgba(0, 255, 0, 1);
                                    }
                                    &.red{
                                        background: rgba(255, 0, 0, 1);
                                    }
                                }
                            }
                        }
                    }
                }
                .ul {
                    width: 95%;
                    //margin: 0 auto;
                    // margin-top: 20px;
                    // height: pxToRem(700);
                    list-style: none;
                    overflow-y: auto;

                    .li {
                        position: relative;
                        width: 100%;
                        height: pxToRem(100);
                        margin-bottom: pxToRem(15);
                        cursor: pointer;
                        border: pxToRem(1) solid #F8F7F9;
                        box-sizing: border-box;
                        &:hover{
                            .operationBtn{
                                visibility: visible;
                            }
                        }
                        .cover {
                            display: block;
                            width: 100%;
                            height: 100%;
                        }

                        .infoBox {
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: pxToRem(10) pxToRem(20);
                            box-sizing: border-box;
                            background: rgba(34, 58, 104, 0.39);
                            z-index: 10;

                            .name {
                                width: 50%;
                                min-width: 50%;
                                font-size: pxToRem(12);
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                color: #FFFFFF;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }

                            .status {
                                font-size: pxToRem(12);
                                font-family: Source Han Sans CN;
                                font-weight: 400;

                                &.green {
                                    color: #2DC27B;
                                }

                                &.red {
                                    color: #F33F3F;
                                }
                            }
                        }

                        .operationBtn {
                            position: absolute;
                            top: 0;
                            left: 0;
                            background: rgba(34, 58, 104, 0.39);
                            width: 100%;
                            display: flex;
                            justify-content: flex-end;
                            align-items: center;
                            padding: pxToRem(4) pxToRem(10);
                            box-sizing: border-box;
                            z-index: 10;
                            visibility: hidden;

                            img {
                                display: block;
                                width: pxToRem(16);
                                height: pxToRem(16);
                                margin-left: pxToRem(6);
                            }
                        }
                    }
                }

                .ul::-webkit-scrollbar {
                    width: pxToRem(5);
                }

                /*滚动槽*/
                .ul::-webkit-scrollbar-track {
                    -webkit-box-shadow: inset 0 0 pxToRem(5) rgba(0, 0, 0, 0.1);
                    border-radius: 10px;
                }

                /* 滚动条滑块 */
                .ul::-webkit-scrollbar-thumb {
                    border-radius: 10px;
                    background: rgba(0, 0, 0, 0.1);
                    -webkit-box-shadow: inset 0 0 pxToRem(5) rgba(0, 0, 0, 0.1);
                }

                .ul::-webkit-scrollbar-thumb:window-inactive {
                    background: rgba(255, 0, 0, 0.4);
                }
            }
            #map{
                width: 100%;
                height: 100%;
            }

        }
        .bottom{
            position: relative;
            width: 100%;
            height: pxToRem(340);
            background: rgba(1, 52, 104, 0.55);
            border: pxToRem(1) solid rgba(1, 223, 244, 0.55);
            border-radius: pxToRem(12);
            box-shadow: rgba(255,255,255,0.5) 0 0 pxToRem(20)  inset;
            .treeSelect{
                width: pxToRem(250);
                height: pxToRem(40);
                position: absolute;
                bottom: pxToRem(150);
                left: pxToRem(50);
                color: #BCF0FE !important;
                .vue-treeselect__control{
                    width:  pxToRem(250);
                    height: pxToRem(40);
                    line-height: pxToRem(40);
                    background-color: rgba(6, 90, 147, 0.5);
                    border: 0px solid #065A93;
                    border-radius: 0;
                    .vue-treeselect__input{
                        font-size: pxToRem(12);
                        line-height: pxToRem(40);
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #BCF0FE !important;
                    }
                    .vue-treeselect__single-value{
                        font-size: pxToRem(12);
                        line-height: pxToRem(40);
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #BCF0FE;
                    }

                }
                .vue-treeselect__menu{
                    border: none;
                    box-shadow: 0 0 pxToRem(10) rgba(255,255,255,0.5);
                    background-color: rgba(6, 90, 147, 0.2) !important;
                    &::-webkit-scrollbar {
                        width: 6px;
                    }

                    /*滚动槽*/
                    &::-webkit-scrollbar-track {
                        -webkit-box-shadow: inset 0 0 6px rgba(1,223,244,0.2);
                        border-radius: 10px;
                    }

                    /* 滚动条滑块 */
                    &::-webkit-scrollbar-thumb {
                        border-radius: 10px;
                        background: rgba(1,223,244,0.2);
                        -webkit-box-shadow: inset 0 0 6px rgba(1,223,244,0.2);
                    }

                    &::-webkit-scrollbar-thumb:window-inactive {
                        background: rgba(255, 0, 0, 0.4);
                    }
                }
                .vue-treeselect--single .vue-treeselect__option--selected {
                    background: rgba(1, 52, 104, 1) !important;
                    font-weight: 600;
                }
                .vue-treeselect--single .vue-treeselect__option--selected:hover {
                    background: rgba(1, 52, 104, 1) !important;
                }
                .vue-treeselect__option--highlight {
                    background:  rgba(6, 90, 147, 0.5);
                }
                .vue-treeselect--single .vue-treeselect__option--selected:hover {
                    background: rgba(6, 90, 147, 0.5);
                }
                .vue-treeselect__control-arrow{
                    color: #00EAEA;
                }
                .vue-treeselect__option-arrow {
                    color: #00EAEA;
                }
            }
            .statis-box{
                position: relative;
                width: pxToRem(255);
                height: pxToRem(100);
                margin: pxToRem(120) auto pxToRem(10);
                img{
                    display: block;
                    width: 100%;
                    height: 100%;
                    //transform-style:preserve-3d;
                    /*-webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
                    -webkit-transition: -webkit-transform 1s linear;
                    transition: transform 1s linear;*/
                    -webkit-animation: scale-animation 2s alternate;
                    animation: scale-animation 2s  infinite;
                }
                .lineBox{
                    position: absolute;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    &:nth-of-type(1){
                        width: pxToRem(295);
                        height: pxToRem(80);
                        background-image: url('../../assets/images/md-board/common/line-bc6.png');
                        right: 0;
                        top: 0;
                        transform: translate(90%,0%) translateZ(pxToRem(100));
                        .numBox{
                            right: 0;
                            .rollNum-main{
                                span{
                                    background: linear-gradient(0deg, #00FDF7, rgba(6, 41, 106, 0));
                                }
                            }
                        }
                    }
                    &:nth-of-type(2){
                        width: pxToRem(150);
                        height: pxToRem(50);
                        right: 0;
                        top: 0;
                        transform: translate(35%,-40%) translateZ(pxToRem(100));
                        background-image: url('../../assets/images/md-board/common/line-bc6.png');
                        .numBox{
                            right: 0;
                            .rollNum-main{
                                span{
                                    background: linear-gradient(0deg, rgba(255, 255, 255, 0.96), rgba(6, 41, 106, 0));
                                }
                            }
                        }
                    }
                    &:nth-of-type(3){
                        width: pxToRem(150);
                        height: pxToRem(50);
                        left: 0;
                        top: 0;
                        transform:  translate(-35%,-40%) translateZ(pxToRem(0));
                        background-image: url('../../assets/images/md-board/common/line-bc9.png');
                        .numBox{
                            left: 0;
                            .rollNum-main{
                                span{
                                    background: linear-gradient(0deg, #29F29C, rgba(1, 52, 104, 0));
                                }
                            }
                        }
                    }
                    &:nth-of-type(4){
                        width: pxToRem(295);
                        height: pxToRem(80);
                        left: 0;
                        top: 0;
                        transform: translate(-90%,0%) translateZ(pxToRem(100));
                        background-image: url('../../assets/images/md-board/common/line-bc9.png');
                        .numBox{
                            left: 0;
                            .rollNum-main{
                                span{
                                    background: linear-gradient(0deg, #00FDF7, rgba(6, 41, 106, 0));
                                }
                            }
                        }
                    }
                    .numBox{
                        position: absolute;
                        top: pxToRem(-10);
                        transform: translateY(-100%);
                        .text{
                            font-size: pxToRem(24);
                            font-family: Source Han Sans CN;
                            font-weight: 500;
                            color: #BCF0FE;
                            margin-bottom: pxToRem(10);
                        }
                        .num-list{
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            .num-item{
                                width: pxToRem(25);
                                height: pxToRem(38);
                                border-radius: pxToRem(3);
                                text-align: center;
                                line-height: pxToRem(38);
                                font-size: pxToRem(30);
                                font-family: Gothic!important;
                                font-weight: 400;
                                color: #FFFFFF;
                                margin-right: pxToRem(8);
                                margin-bottom: pxToRem(2);
                                &:last-of-type{
                                    background:transparent;
                                    border: none;
                                    font-size: pxToRem(20);
                                    font-family: Source Han Sans CN;
                                    font-weight: 500;
                                    color: #01DFF3;
                                    margin-right: 0;
                                    &::after{
                                        display: none;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .stepsBox{
                position: relative;
                width: pxToRem(800);
                //height: pxToRem(40);
                margin: pxToRem(0) auto;
                .step-list-box{
                    position: relative;
                    width: 100%;
                    //height: pxToRem(10);
                    overflow-x: auto;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    &::-webkit-scrollbar {
                        position: absolute;
                        left: 0;
                        bottom: pxToRem(10);
                        height: pxToRem(15);
                        cursor: pointer;
                    }
                    /*滚动槽*/
                    &::-webkit-scrollbar-track {
                        -webkit-box-shadow: inset 0 0 6px rgba(1,223,244,0.2);
                        border-radius: pxToRem(8);
                    }

                    /* 滚动条滑块 */
                    &::-webkit-scrollbar-thumb {
                        border-radius:pxToRem(8);
                        background: rgba(1,223,244,0.2);
                        -webkit-box-shadow: inset 0 0 6px rgba(1,223,244,0.2);
                    }

                    &::-webkit-scrollbar-thumb:window-inactive {
                        background: rgba(255, 0, 0, 0.4);
                    }
                    .step-item{
                        position: relative;
                        width: pxToRem(200);
                        height:pxToRem(9);
                        min-width: pxToRem(200);
                        margin: pxToRem(35) 0;
                        background: #048BC5;
                        padding-right:pxToRem(100);
                        box-sizing: border-box;
                        background-clip:border-box;
                        &.active{
                            background-color: #00EAEA;
                        }
                        &.clip{
                            background: linear-gradient(left, #00EAEA, #048BC5);
                            //background-clip:content-box;
                        }
                        .rightText{
                            width: 100% !important;
                            text-align: right !important;
                        }
                        .name{
                            width: 100%;
                            position: absolute;
                            left: 0;
                            top: pxToRem(15);
                            font-size: pxToRem(16);
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #BCF0FE;
                        }
                        .time{
                            width: 100%;
                            position: absolute;
                            left: 0;
                            bottom: pxToRem(15);
                            font-size: pxToRem(14);
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #BCF0FE;
                        }
                        .step-item-bc-active{
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            width: pxToRem(22);
                            height: pxToRem(22);
                            background: #00EAEA;
                            border-radius: 50%;
                            z-index: 2;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            flex-direction: column;
                            &::after{
                                display: block;
                                content: '';
                                width: pxToRem(10);
                                height: pxToRem(10);
                                background: #FFFFFF;
                                border-radius: 50%;
                            }
                        }
                        .step-item-bc{
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            width: pxToRem(22);
                            height: pxToRem(22);
                            background: #048BC5;
                            border-radius: 50%;
                        }
                        &:first-of-type{
                            border-top-left-radius: pxToRem(7);
                            border-bottom-left-radius: pxToRem(7);
                            .time,
                            .name{
                                text-align: left;
                            }
                        }
                        &:last-of-type{
                            width: pxToRem(22);
                            min-width: pxToRem(22);
                            border-top-right-radius: pxToRem(7);
                            border-bottom-right-radius: pxToRem(7);
                            .time,
                            .name{
                                width: pxToRem(200);
                            }
                            .step-item-bc-active,
                            .step-item-bc{
                                right: 0;
                            }
                        }
                    }
                }
            }
            .table-box{
                width: 100%;
                height: 100%;
                .table-box-top{
                    width: 100%;
                    height: pxToRem(45);
                    padding: pxToRem(12) pxToRem(36);
                    box-sizing: border-box;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    background: linear-gradient(90deg, rgba(26, 201, 255, 0.4) 0%, rgba(26, 201, 255, 0) 100%);
                    border-radius: pxToRem(10) 0px 0px 0px;
                    border-bottom: pxToRem(1) solid #1AC9FF;
                    .icon{
                        width: pxToRem(22);
                        height: pxToRem(22);
                        margin-right: pxToRem(10);
                        img{
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .text{
                        font-size: pxToRem(20);
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        color: #DFEEF3;
                        background: linear-gradient(0deg, #7ED7FB 0%, #FFFFFF 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        margin-right: pxToRem(120);
                    }
                }
                .table-box-bottom{
                    width: 100%;
                    height: calc(100% - 0.45rem);
                    overflow: hidden;
                    .t-header{
                        width: 100%;
                        height: pxToRem(33);
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        .td{
                            flex: 1;
                            height: 100%;
                            line-height: pxToRem(33);
                            text-align: center;
                            font-size: pxToRem(16);
                            font-family: Source Han Sans CN;
                            font-weight: bold;
                            color: #BCF0FE;
                            box-sizing: border-box;
                        }
                    }
                    .t-body{
                        width: 100%;
                        height: calc(100% - 0.78rem);
                        overflow: hidden;
                        .tr{
                            width: 100%;
                            height: pxToRem(33);
                            border-bottom: pxToRem(1) solid rgba(26, 201, 255, 0.35);
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                        }
                        .td{
                            flex: 1;
                            height: 100%;
                            line-height: pxToRem(33);
                            text-align: center;
                            font-size: pxToRem(14);
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #BCF0FE;
                            box-sizing: border-box;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            &.flex-box{
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                .icon{
                                    display: block;
                                    width: pxToRem(24);
                                    height: pxToRem(24);
                                    margin-right: pxToRem(35);
                                }
                            }
                            .tag-bc{
                                padding: pxToRem(7) pxToRem(16);
                                box-sizing: border-box;
                                border-radius: pxToRem(4);
                                color: #FFFFFF;
                                &.tag-bc10{
                                    background-color: rgba(232, 26, 26, 0.5);
                                }
                                &.tag-bc11{
                                    background-color: rgba(232, 26, 26, 0.5);
                                }
                                &.tag-bc12{
                                    background-color: rgba(232, 26, 26, 0.5);
                                }
                                &.tag-bc20{
                                    background-color: rgba(255, 234, 0, 0.5);
                                }
                                &.tag-bc30{
                                    background-color: rgba(255, 234, 0, 0.5);
                                }
                                &.tag-bc100{
                                    background-color: rgba(1, 223, 244, 0.5);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
.circle-box{
    width: 100%;
    height: pxToRem(250);
    padding: 0 pxToRem(50) pxToRem(30);
    box-sizing: border-box;
    .warp{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .circle-list{
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        .circle-item{
            //margin-right: pxToRem(60);
            margin-bottom: pxToRem(10);
            width: 30%;
            min-width: 30%;
            &:nth-of-type(3){
                //margin-right: 0;
            }
            .text{
                width: 100%;
                font-size: pxToRem(12);
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #BCF0FE;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
    .circle-inner{
        font-size: pxToRem(18);
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #BCF0FE;
    }
}
.triangle-box{
    display: flex;
    .triangle{
        position: relative;
        width: pxToRem(20);
        height: pxToRem(20);
        margin-right: pxToRem(20);
        overflow: hidden;
        background-image: url('../../assets/images/md-board/common/arrow-icon.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        &:nth-of-type(1){
            -webkit-animation: block-animation 1s 3s linear alternate infinite;
            animation: block-animation 1s 3s linear alternate infinite;
        }
        &:nth-of-type(2){
            -webkit-animation: block-animation 2s linear alternate infinite;
            animation: block-animation 2s  linear alternate infinite;
        }
        &:nth-of-type(3){
            -webkit-animation: block-animation 3s  linear alternate infinite;
            animation: block-animation 3s linear alternate infinite;
        }
    }
}
/deep/ .canvas {
    .item {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .radius {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 5px;

            &.radius1 {
                background-color: #458DFE;
            }

            &.radius2 {
                background-color: #FFC000;
            }

            &.radius3 {
                background-color: #49A9EE;
            }

        }

        .name {
            margin-right: 5px;
            font-size: 10px;
        }
    }
}
.canvas-center-box{
    position: absolute;
    width: pxToRem(105);
    height: pxToRem(105);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-image: url('../../assets/images/md-board/common/round-bc.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .num{
        font-size: pxToRem(28);
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #FFFFFF;
        text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.26);
        background: linear-gradient(0deg, #2CC6FF 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
        margin-top: pxToRem(-10);
    }
    .text{
        font-size: pxToRem(10);
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        text-align: center;
    }

}
/deep/ .ivu-page-next,
/deep/ .ivu-page-prev {
    width: pxToRem(44);
    height: pxToRem(44);
    background: #F8F9FB;
    border-radius: pxToRem(4);
    border: none !important;
    color: #9AA1A8 !important;
    line-height: pxToRem(44);

    a {
        font-size: pxToRem(14);
        color: #32585A;
    }
}

/deep/ .ivu-page-next:hover,
/deep/ .ivu-page-prev:hover {
    border-color: #089082 !important;
    color: #F36E65 !important;
}

/deep/ .ivu-page-item {
    width: pxToRem(44);
    height: pxToRem(44);
    border-color: transparent !important;
    background-color: #F8F9FB !important;
    line-height: pxToRem(44);

    a {
        font-size: pxToRem(14);
        color: #32585A;
    }
}

/deep/ .ivu-page-options-elevator {
    height: pxToRem(44);
}

/deep/ .ivu-page-options-elevator input {
    width: pxToRem(67);
    height: pxToRem(44);
    background: #F8F9FB;
    border: pxToRem(2) solid #F8F9FB;
    border-radius: pxToRem(4);
}

/deep/ .ivu-page-item-active {
    border-color: transparent !important;
    background-color: #E9F2F6 !important;
}

/deep/ .ivu-page-item-active a,
/deep/ .ivu-page-item-active:hover a {
    color: #32585A !important;
}

